<template>
  <div id="thread-list">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">
        <div class="thread-item" v-for="item in items" :key="item">
          <img :src="item.avatar" alt class="user-avatar" />
          <div class="thread-info">
            <p class="thread-title">{{ item.thread_title}}</p>
            <p class="thread-subinfo">{{ item.thread_author }} pub at {{ item.published_at }}</p>
          </div>
          <hr />
        </div>
      </el-tab-pane>
      <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
      <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
      <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
    </el-tabs>
    <div class="block" style="text-align:center">
      <el-pagination layout="prev, pager, next" :total="50"></el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "first",
      items: [
        {
          avatar: "http://hugaojian.com/zwet2./imgs/timg",
          thread_title: "帖子1",
          thread_author: "高健",
          published_at: "2020/02/10",
          view_count: 99,
          comment_count: 100
        },
        {
          avatar: "http://hugaojian.com/zwet2./imgs/timg",
          thread_title: "帖子1",
          thread_author: "高健",
          published_at: "2020/02/10",
          view_count: 99,
          comment_count: 100
        },
        {
          avatar: "http://hugaojian.com/zwet2./imgs/timg",
          thread_title: "帖子1",
          thread_author: "高健",
          published_at: "2020/02/10",
          view_count: 99,
          comment_count: 100
        },
        {
          avatar: "http://hugaojian.com/zwet2./imgs/timg",
          thread_title: "帖子1",
          thread_author: "高健",
          published_at: "2020/02/10",
          view_count: 99,
          comment_count: 100
        },
        {
          avatar: "http://hugaojian.com/zwet2./imgs/timg",
          thread_title: "帖子1",
          thread_author: "高健",
          published_at: "2020/02/10",
          view_count: 99,
          comment_count: 100
        }
      ]
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>

<style lang="scss">
.thread-item {
  .user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
  .thread-info {
    display: inline-block;
    .thread-title {
      margin-top: 0;
    }
    .thread-subinfo {
      margin-bottom: 0;
      margin-top: 0;
    }
  }
}
</style>